<script setup>
import { useRouter } from 'vue-router'
const router = useRouter() // 获取路由实例
// 模拟数据（需替换为真实图片 URL）
const hotRankingList = [
  { img: require('@/assets/本周热门.png'), title: '本周热门' },
  { img: require('@/assets/收藏榜.png'), title: '收藏榜' },
  { img: require('@/assets/潜力菜谱.png'), title: '潜力菜谱' },
  { img: require('@/assets/10人收藏.png'), title: '10人收藏' },
]

const hotCategoryList = [
  { img: require('@/assets/本周热门.png'), title: '红烧' },
  { img: require('@/assets/收藏榜.png'),  title: '清蒸' },
  { img: require('@/assets/潜力菜谱.png'), title: '油炸' },
  { img: require('@/assets/10人收藏.png'), title: '黄焖' },
  { img: require('@/assets/本周热门.png'),  title: '甜品' },
  { img: require('@/assets/收藏榜.png'),   title: '小吃' },
  { img: require('@/assets/潜力菜谱.png'),  title: '烧烤' },
  { img: require('@/assets/10人收藏.png'), title: '汤羹' },
  { img: require('@/assets/本周热门.png'),  title: '烘培' },
  { img: require('@/assets/收藏榜.png'),   title: '炒菜' },
  { img: require('@/assets/潜力菜谱.png'),  title: '麻辣' },
  { img: require('@/assets/10人收藏.png'), title: '面食' },
]

const goDetail = (item)=>{
  console.log(item)
  router.push({
    //name: 'recipeTypeInfo', // 路由 name（要在 router/index.js 定义）
    path:"/recipeTypeInfo",
    query: { title: item.title } // 或 params
  })
}
const search = (item)=>{
  console.log(item.title)
  router.push({
    path:"/searchResult",
    query: { search: item.title } // 或 params
  })
}
</script>

<template>
  <div class="page-container">
    <!-- 人气榜单模块 -->
    <section class="section">
      <h2 class="section-title">人气榜单</h2>
      <van-grid :border="false" :column-num="4" class="custom-grid">
        <van-grid-item
            v-for="(item, index) in hotRankingList"
            :key="index"
            @click="goDetail(item)"
        >
          <template #icon>
            <img :src="item.img" class="grid-img" />
          </template>
          <template #text>
            {{ item.title }}
          </template>
        </van-grid-item>
      </van-grid>
    </section>


    <!-- 热门分类模块 -->
    <section class="section">
      <h2 class="section-title">热门分类</h2>
      <van-grid :border="false" :column-num="4" class="custom-grid">
        <van-grid-item
            v-for="(item, index) in hotCategoryList"
            :key="index"
            @click="search(item)"
        >
          <template #icon>
            <img :src="item.img" class="grid-img" />
          </template>
          <template #text>
            {{ item.title }}
          </template>
        </van-grid-item>
      </van-grid>
    </section>
  </div>
</template>

<style scoped>
.page-container {
  background-color: #fff;
  padding: 16px;
}

.section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
}

.custom-grid {
  background-color: #fafafa; /* 网格背景色，可选 */
}

.grid-img {
  width: 100%;
  height: auto;
  border-radius: 10px; /* 图片圆角，可选 */
}
</style>